<template>
	<div class="bg-white p-4">
		<div class="flex">
			<t-button class="mr-4" @click="updateDepartmentOneVisible">添加部门</t-button>
			<t-button theme="danger" @click="deleteAllDepartment" :disabled="deleteButtonDisabled">删除部门</t-button>
		</div>
		<t-table 
			:pagination="{ total: this.data.length }"
			class="mt-4"
			row-key="department1_id" 
			:columns="columns" 
			:data="emptyData ? [] : data" 
			:expanded-row-keys="expandedRowKeys"
			:expandIcon="expandIcon" 
			:expandOnRowClick="expandOnRowClick"
			:horizontalScrollAffixedBottom="true"
			@expand-change="rehandleExpandChange"
			:selected-row-keys="selectedRowKeys"
			@select-change="rehandleSelectChange"
			:resizable="true"
			>
			<!-- 开关插槽 -->
			<template #switch="{row}">
				<t-switch size="large" :defaultValue="!!row.state" :label="['开', '关']" @change="onChange(row)"></t-switch>
			</template>
			<!-- 操作插槽 -->
			<template #op-column>
				<p>操作</p>
			</template>
			<template #op="{row}">
				<div class="flex">
					<div class="text-blue-700 cursor-pointer mr-2 hover:underline" @click="addDivisionalSon(row)">添加子部门</div>
					<div class="text-blue-700 mr-2 cursor-pointer hover:underline" @click="updateDepartmentOne(row)">编辑</div>
					<div class="text-red-500 cursor-pointer hover:underline" @click="deleteDepartmentOne(row)">删除</div>
				</div>
			</template>
			<!-- 二级插槽 -->
			<template #expandedRow="{ row }">
				<ul v-show="expandedShow(row)">
					<li v-for="(item, department2_id) in row.departmentSon" class="flex w-full justify-between mb-2 items-center">
						<div class="flex">
							<div class="mr-4 text-gray-400">子部门</div>
							<div>{{item.department2}}</div>
						</div>
						<t-affix>
							<div class="flex">
								<div class="text-blue-700 cursor-pointer mr-2 hover:underline" @click="updateDepartmentTwo(item, row.department1_id)">编辑</div>
								<div class="text-red-500 cursor-pointer hover:underline" @click="deleteDepartmentTwo(item)">删除</div>
							</div>
						</t-affix>
					</li>
				</ul>
				<div v-show="!expandedShow(row)" class="text-gray-400">该部门没有子部门</div>
			</template>
		</t-table>
		<!-- 添加子部门弹窗 -->
		<t-dialog
		:header="`${this.departmentName}-添加子部门`" 
		:visible.sync="visible" 
		:onConfirm="onConfirmAnother"
		:confirmBtn="loading"
		>
			<t-form :data="formData" labelAlign="top" class="mt-2 mb-16">
				<t-form-item label="子部门名称" name="department2" requiredMark>
					<t-input
					v-model="formData.department2"
					placeholder="请填写子部门名称"
					:status="department2_status"
					:tips="department2_tips"
					:onBlur="department2Blur"
					></t-input>
				</t-form-item>
			</t-form>
		</t-dialog>
		<!-- 添加一级部门弹窗 -->
		<t-dialog
		:header="'添加一级部门'"
		:visible.sync="departmentOneVisible"
		:onConfirm="addDepartmentOne"
		:confirmBth="departmentOneLoading"
		>
			<t-form :data="departmentOneForm" labelAlign="top" class="mt-2 mb-16">
				<t-form-item label="部门名称" name="department1" requiredMark>
					<t-input
					v-model="departmentOneForm.department1"
					placeholder="请添加部门名称"
					:status="department1_status"
					:tips="department1_tips"
					:onBlur="departmentOneBlur"
					></t-input>
				</t-form-item>
			</t-form>
		</t-dialog>
		<!-- 编辑一级部门名称弹窗 -->
		<t-dialog
		:header="'编辑部门名称'"
		:visible.sync="updateDepartmentNameVisible"
		:onConfirm="updateDepartmentName"
		:confirmBth="departmentOneLoading"
		>
			<t-form :data="updateDepartmentOneFormData" labelAlign="top" class="mt-2 mb-16">
				<t-form-item label="部门名称" name="updateDepartment1" requiredMark>
					<t-input
					v-model="updateDepartmentOneFormData.updateDepartment1"
					placeholder="请编辑部门名称"
					:status="updateDepartment1_status"
					:tips="updateDepartment1_tips"
					:onBlur="updateDepartmentOneBlur"
					>
					</t-input>
				</t-form-item>
			</t-form>
		</t-dialog>
		<!-- 编辑二级级部门名称弹窗 -->
		<t-dialog
		:header="'编辑部门名称'"
		:visible.sync="updateDepartmentTwoNameVisible"
		:onConfirm="updateDepartmentTwoName"
		:confirmBth="departmentOneLoading"
		>
			<t-form :data="updateDepartmentTwoFormData" labelAlign="top" class="mt-2 mb-16">
				<t-form-item label="部门名称" name="updateDepartment2" requiredMark>
					<t-input
					v-model="updateDepartmentTwoFormData.updateDepartment2"
					placeholder="请编辑部门名称"
					:status="updateDepartment2_status"
					:tips="updateDepartment2_tips"
					:onBlur="updateDepartmentTwoBlur"
					>
					</t-input>
				</t-form-item>
			</t-form>
		</t-dialog>
	</div>
</template>

<script>
	import { getDepartment } from '@/api'
	import { ChevronRightIcon, ChevronRightCircleIcon } from 'tdesign-icons-vue'
	import { isSpecial } from '@/unit'
	import { getUserId } from '@/unit/auth'
	import { toDay } from '@/unit/myDate'
	
	// 表头配置
	const getColumns = (isFixedColumn) => [
		{
			colKey: 'row-select',
			type: 'multiple',
		},
		{
			colKey: 'department1_id',
			title: '部门编号',
		},
		{
			colKey: 'department1',
			title: '部门名称',
		},
		{
			colKey: 'user_number',
			title: '部门人数'
		},
		{
			colKey: 'user_id',
			title: '创建人'
		},
		{
			colKey: 'add_date',
			title: '创建时间'
		},
		{
			colKey: 'state',
			title: '是否禁用',
			cell: 'switch'
		},
		{
			colKey: 'operation',
			title: '管理',
			cell: 'op',
			fixed: 'right'
		},
	];
	
	export default {
		name: 'Divisional',
		data() {
			return {
				selectedRowKeys: [],
				expandControl: 'true',
				expandIcon: true,
				expandOnRowClick: false,
				fixedColumns: false,
				emptyData: false,
				data: [],
				expandedRowKeys: [],
				defaultExpandedRowKeys: [],
				// 添加子部门
				departmentId: '',
				departmentName: '',
				visible: false,
				formData: {
					department_id: '',
					department2: ''
				},
				department2_status: '',
				department2_tips: '',
				loading: {},
				// 添加一级部门
				departmentOneVisible: false,
				departmentOneForm: {
					department1: '',
					user_id: '',
					add_date: ''
				},
				department1_status: '',
				department1_tips: '',
				departmentOneLoading: {},
				// 复选按钮
				checkValue: [],
				deleteButtonDisabled: true,
				deleteLoadin: null,
				// 编辑一级部门名称
				updateDepartmentNameVisible: false,
				updateDepartmentOneFormData: {
					updateDepartment1: '',
					department1_id: ''
				},
				updateDepartment1_status: '',
				updateDepartment1_tips: '',
				// 编辑二级部门名称
				updateDepartmentTwoNameVisible: false,
				updateDepartmentTwoFormData: {
					updateDepartment2: '',
					department2_id: '',
					department_id: ''
				},
				updateDepartment2_status: '',
				updateDepartment2_tips: '',
			}
		},
		computed: {
			// 表头配置
			columns() {
				return getColumns(this.fixedColumns);
			},
		},
		watch: {
			// 监视修改一级部门弹窗关闭时，初始化校验
			updateDepartmentTwoNameVisible: {
				immediate: false,
				handler(){
					this.updateDepartment2_status = ''
					this.updateDepartment2_tips = ''
					this.updateDepartmentTwoFormData.department2 = ''
				}
			},
			// 监视修改一级部门弹窗关闭时，初始化校验
			updateDepartmentNameVisible: {
				immediate: false,
				handler(){
					this.updateDepartment1_status = ''
					this.updateDepartment1_tips = ''
					this.updateDepartmentOneFormData.department1 = ''
				}
			},
			// 监视‘添加’一级部门弹窗关闭时，初始化校验
			departmentOneVisible: {
				immediate: false,
				handler(){
					this.department1_status = ''
					this.department1_tips = ''
					this.departmentOneForm.department1 = ''
				}
			},
			// 监视添加二级部门弹窗关闭时，初始化校验
			visible: {
				immediate: false,
				handler(){
					this.department2_status = ''
					this.department2_tips = ''
					this.formData.department2 = ''
				}
			},
			// 二级展开图标交互
			expandControl(val) {
				if (val === 'true') {
					this.expandIcon = true;
				} else if (val === 'false') {
					this.expandIcon = false;
				}
			},
			// 监视复选框，判断删除按钮为启用或禁用状态
			checkValue: {
				immediate: false,
				handler(newVal, oldVal){
					if (newVal.length === 0){
						this.deleteButtonDisabled = true
					} else {
						this.deleteButtonDisabled = false
					}
				}
			}
		},
		methods: {
			// 删除二级部门
			deleteDepartmentTwo(item){
				if(this.deleteLoadin){
					this.deleteLoadin.show()
					return
				}
				this.deleteLoadin = this.$dialog({
					header: '提示',
					body: '是否确认删除该部门',
					onConfirm: ({e}) => {
						let obj = {
							delete_state: 1,
							department2_id: item.department2_id
						}
						this.$store.dispatch('department/deleteDepartmentSon', obj).then(res => {
							if(res.status === 0){
								this.$message.success(res.message)
							} else {
								this.$message.error(res.message)
							}
							this.deleteLoadin.hide()
						})
					}
				})
			},
			
			// 删除一级部门
			deleteDepartmentOne(row){
				if(this.deleteLoadin){
					this.deleteLoadin.show()
					return
				}
				this.deleteLoadin = this.$dialog({
					header: '提示',
					body: '是否确认删除该部门',
					onConfirm: ({e}) => {
						let obj = {
							delete_state: 1,
							department1_id: row.department1_id
						}
						this.$store.dispatch('department/deleteDepartment', obj).then(res => {
							if (res.status === 0) {
								this.$message.success(res.message)
							} else {
								this.$message.error(res.message)
							}
						})
						this.deleteLoadin.hide()
					}
				})
			},
			
			// ##修改二级部门
			// 修改二级部门表单校验
			updateDepartmentTwoBlur(){
				if(this.updateDepartmentTwoFormData.updateDepartment2 === ''){
					this.updateDepartment2_status = 'error'
					this.updateDepartment2_tips = '部门名称是必填项'
					return false
				} else {
					if (!isSpecial(this.updateDepartmentTwoFormData.updateDepartment2)){
						this.updateDepartment2_status = 'error'
						this.updateDepartment2_tips = '请不要填写特殊符号'
						return false
					} else {
						this.updateDepartment2_status = ''
						this.updateDepartment2_tips = ''
						return true
					}
				}
			},
			// 修改二级部门确认按钮弹窗
			updateDepartmentTwoName(){
				this.departmentOneLoading = {
					content: '提交中...',
					theme: 'primary',
					loading: true,
				}
				if(!this.updateDepartmentTwoBlur()){ 
					this.departmentOneLoading = {}
					return this.$message.error('请输入合法的子部门名称')
				}
				let obj = {
					department2_id: this.updateDepartmentTwoFormData.department2_id,
					department2: this.updateDepartmentTwoFormData.updateDepartment2,
					department_id: this.updateDepartmentTwoFormData.department_id
				}
				this.$store.dispatch('department/updateDepartmentSon', obj).then(res => {
					if(res.status === 0) {
						this.$message.success(res.message)
						this.getDepartment()
						this.updateDepartmentTwoFormData.updateDepartment2 = ''
						this.updateDepartmentTwoNameVisible = false
						this.departmentOneLoading = {}
					} else {
						this.$message.error(res.message)
						this.departmentOneLoading = {}
					}
				})
			},
			// 修改二级部门名称按钮
			updateDepartmentTwo(item, id){
				this.updateDepartmentTwoNameVisible = true
				this.updateDepartmentTwoFormData.updateDepartment2 = item.department2
				this.updateDepartmentTwoFormData.department2_id = item.department2_id
				this.updateDepartmentTwoFormData.department_id = id
			},
			
			// ##修改一级部门名称
			// 修改一级部门表单校验
			updateDepartmentOneBlur(){
				if(this.updateDepartmentOneFormData.updateDepartment1 === ''){
					this.updateDepartment1_status = 'error'
					this.updateDepartment1_tips = '部门名称是必填项'
					return false
				} else {
					if (!isSpecial(this.updateDepartmentOneFormData.updateDepartment1)){
						this.updateDepartment1_status = 'error'
						this.updateDepartment1_tips = '请不要填写特殊符号'
						return false
					} else {
						this.updateDepartment1_status = ''
						this.updateDepartment1_tips = ''
						return true
					}
				}
			},
			// 修改一级部门确认按钮弹窗
			updateDepartmentName(){
				this.departmentOneLoading = {
					content: '提交中...',
					theme: 'primary',
					loading: true,
				}
				if(!this.updateDepartmentOneBlur()){ 
					this.departmentOneLoading = {}
					return this.$message.error('请输入合法的子部门名称')
				}
				let obj = {
					department1_id: this.updateDepartmentOneFormData.department1_id,
					department1: this.updateDepartmentOneFormData.updateDepartment1
				}
				this.$store.dispatch('department/updateDepartment', obj).then(res => {
					if(res.status === 0) {
						this.$message.success(res.message)
						this.getDepartment()
						this.updateDepartmentOneFormData.updateDepartment1 = ''
						this.updateDepartmentNameVisible = false
						this.departmentOneLoading = {}
					} else {
						this.$message.error(res.message)
						this.departmentOneLoading = {}
					}
				})
			},
			// 开启修改一级部门的弹窗
			updateDepartmentOne(row){
				this.updateDepartmentNameVisible = true
				this.updateDepartmentOneFormData.updateDepartment1 = row.department1
				this.updateDepartmentOneFormData.department1_id = row.department1_id
			},
			
			// 批量删除
			deleteAllDepartment(){
				if(this.deleteLoadin){
					this.deleteLoadin.show()
					return
				}
				this.deleteLoadin = this.$dialog({
					header: '提示',
					body: '是否确认要删除部门',
					onConfirm: ({ e }) => {
						this.$store.dispatch('department/deleteDepartmentList', this.checkValue).then(res => {
							if (res.status === 0){
								this.$message.success(res.message)
								this.getDepartment()
								this.deleteLoadin.hide()
							} else {
								this.$message.error(res.message)
								this.deleteLoadin.hide()
							}
						})
					}
				})
			},
			
			// ##添加一级部门
			// 部门名称校验
			departmentOneBlur(){
				if(this.departmentOneForm.department1 === ''){
					this.department1_status = 'error'
					this.department1_tips = '部门名称是必填项'
					return false
				} else {
					if (!isSpecial(this.departmentOneForm.department1)){
						this.department1_status = 'error'
						this.department1_tips = '请不要填写特殊符号'
						return false
					} else {
						this.department1_status = ''
						this.department1_tips = ''
						return true
					}
				}
			},
			// 开启添加一级部门的弹窗
			updateDepartmentOneVisible(){
				this.departmentOneVisible = true
			},
			// 点击添加一级部门确认按钮
			addDepartmentOne(){
				this.departmentOneLoading = {
					content: '提交中...',
					theme: 'primary',
					loading: true,
				}
				this.departmentOneForm.user_id = parseInt(getUserId())
				this.departmentOneForm.add_date = toDay()
				if(!this.departmentOneBlur()){ 
					this.departmentOneLoading = {}
					return this.$message.error('请输入合法的子部门名称')
				}
				this.$store.dispatch('department/addDepartment', this.departmentOneForm).then(res => {
					if(res.status === 0) {
						this.$message.success('添加成功')
						this.getDepartment()
						this.departmentOneForm.department1 = ''
						this.departmentOneVisible = false
						this.departmentOneLoading = {}
					} else {
						this.$message.error(res.message)
						this.departmentOneLoading = {}
					}
				})
			},
			
			// ##添加子部门
			// 子部门名称校验
			department2Blur(){
				if(this.formData.department2 === ''){
					this.department2_status = 'error'
					this.department2_tips = '子部门名称是必填项'
					return false
				} else {
					if (!isSpecial(this.formData.department2)){
						this.department2_status = 'error'
						this.department2_tips = '请不要填写特殊符号'
						return false
					} else {
						this.department2_status = ''
						this.department2_tips = ''
						return true
					}
				}
			},
			// 添加子部门，点击确认按钮的操作
			onConfirmAnother(){
				this.loading = {
					content: '提交中...',
					theme: 'primary',
					loading: true,
				}
				if (!this.department2Blur()){
					this.loading = {}
					return this.$message.error('请输入合法的子部门名称')
				}
				this.$store.dispatch('department/addDepartmentSon', this.formData).then(res => {
					if (res.status === 0){
						this.$message.success(res.message)
						this.getDepartment()
						this.formData.department2 = ''
						this.visible = false
						this.loading = {}
					} else {
						this.$message.error(res.message)
						this.loading = {}
					}
				})
			},
			// 点击添加子部门
			addDivisionalSon(row){
				this.formData.department_id = row.department1_id
				this.departmentName = row.department1
				this.visible = true
			},
			
			// 复选框
			rehandleSelectChange(value, { selectedRowData }) {
				this.selectedRowKeys = value;
				this.checkValue = value
			},
			// 判断二级是否有数据
			expandedShow(row){
				if (row.departmentSon.length !== 0) {
					return true
				} else {
					return false
				}
			},

			// 展开与收起二级表格的函数
			rehandleExpandChange(value, params) {
				this.expandedRowKeys = value;
			},
			// 开关变化
			onChange(row){
				let state = function(){
					if(!row.state) { return 1 } else { return 0 }
				} 
				let obj = {
					department1_id: row.department1_id,
					state: state()
				}
				this.$store.dispatch('department/startDepartment', obj).then(res => {
					if (res.status == 0){
						this.$message.success(res.message)
						this.getDepartment()
					} else {
						this.$message.error(res.message)
						this.getDepartment()
					}
				})
			},
			// 请求获取部门列表
			getDepartment() {
				this.$store.dispatch('department/getDepartment').then(res => {
					if (res.status == 0) {
						this.data = res.data
					} else {
						this.$message.error(res.message)
					}
				})
			}
		},
		created() {
			// 请求获取部门列表
			this.getDepartment()
		}
	}
</script>

<style>
</style>
